<!-- Navigation -->
{% if page.nav-style == "invert" or page.header-style == "text" %}
<nav class="navbar navbar-default navbar-custom navbar-fixed-top invert">
    {% else %}
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
        {% endif %}
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="huxblog_navbar">
                <div class="navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="{{ site.baseurl }}/">Home</a>
                        </li>
                        {% for page in site.pages %}
                        {% if page.title and page.hide-in-nav != true %}
                        <li>
                            <a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
                        </li>
                        {% endif %}
                        {% endfor %}
                        <li class="search-icon">
                            <a href="javascript:void(0)">
                                <i class="fa fa-search"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <script>
        // Drop Bootstarp low-performance Navbar
        // Use customize navbar with high-quality material design animation
        // in high-perf jank-free CSS3 implementation
        var $body = document.body;
        var $toggle = document.querySelector('.navbar-toggle');
        var $navbar = document.querySelector('#huxblog_navbar');
        var $collapse = document.querySelector('.navbar-collapse');

        var __HuxNav__ = {
            close: function () {
                $navbar.className = " ";
                // wait until animation end.
                setTimeout(function () {
                    // prevent frequently toggle
                    if ($navbar.className.indexOf('in') < 0) {
                        $collapse.style.height = "0px"
                    }
                }, 400)
            },
            open: function () {
                $collapse.style.height = "auto"
                $navbar.className += " in";
            }
        }

        // Bind Event
        $toggle.addEventListener('click', function (e) {
            if ($navbar.className.indexOf('in') > 0) {
                __HuxNav__.close()
            } else {
                __HuxNav__.open()
            }
        })

        /**
         * Since Fastclick is used to delegate 'touchstart' globally
         * to hack 300ms delay in iOS by performing a fake 'click',
         * Using 'e.stopPropagation' to stop 'touchstart' event from 
         * $toggle/$collapse will break global delegation.
         * 
         * Instead, we use a 'e.target' filter to prevent handler
         * added to document close HuxNav.  
         *
         * Also, we use 'click' instead of 'touchstart' as compromise
         */
        document.addEventListener('click', function (e) {
            if (e.target == $toggle) return;
            if (e.target.className == 'icon-bar') return;
            __HuxNav__.close();
        })
    </script>